<template>
	<view class="prompt-popup-packbox fixed" v-if="isSetShowPopup" @click="setCloseFun">
		<view class="prompt-popup-box absolute" @click.stop="isSetShowPopup = true">
			<image class="bg" :src="`${commonConfigs.domainFrontFileLink}/files/images/competition/confirm-box-bg.png`" mode=""></image>
			
			<view class="prompt-popup-name relative">
				<text>{{ title || '温馨提示' }}</text>
			</view>
			
			<view class="prompt-popup-desc relative" v-if="content" v-html="content"></view>
			
			<view class="prompt-popup-desc relative" v-else>
				<slot></slot>
			</view>
			
			<view class="prompt-popup-btn flex-justify-content-around relative">
				<view class="cancel-txt-btn flex-justify-content-center relative" @click.stop="setCloseFun">
					<image class="bg" :src="`${commonConfigs.domainFrontFileLink}/files/images/popup/null-popup-close-btn.png`" mode=""></image>
					<text class="relative ">{{cancelText}}</text>
				</view>
				<view class="sure-txt-btn flex-justify-content-center relative" @click.stop="setSureFun">
					<image class="bg" :src="`${commonConfigs.domainFrontFileLink}/files/images/popup/null-popup-sure-btn.png`" mode=""></image>
					<text class="relative" style="color: #4470FF;">{{confirmText}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "comPromptPopup",
		props: {
			
			title: String,
			content: String,
			confirmText: String,
			cancelText: String,
			value: {
				type: Boolean,
				default: () => true
			},
			
		},
		computed: {
			commonConfigs() {
				return this.$store.getters.commonConfigs || {};
			},
			isSetShowPopup: {
				get() {
					return this.value;
				},
				set(v) {
					this.$emit('input', v);
				},
			},
		},
		data() {
			return {
				
			}
		},
		methods: {
			
			setSureFun() {
				this.$emit('setSureFun')
			},
			setCloseFun() {
				this.isSetShowPopup = false;
			},
			
		}
	}
</script>

<style lang="scss" scoped>
	.prompt-popup-packbox {
		width: 100vw;
		height: 100vh;
		background-color: rgba(0, 0, 0, 0.8);
		z-index: 10000;
		left: 0;
		top: 0;

		.prompt-popup-box {
			left: 0;
			right: 0;
			top: 0;
			bottom: 0;
			margin: auto;
			width: 606rpx;
			height: 328rpx;
			transform: translateY(-98rpx);
			padding: 36rpx 16rpx 0;

			.prompt-popup-name {
				color: #FFFFFF;
				font-size: 56rpx;
				font-weight: bold;
				text-align: center;
				white-space: nowrap;
				-webkit-text-stroke: 4rpx #2D3489;
				.popup-name {
					width: 180rpx;
					height: 24rpx;
				}

				.popup-name-left {
					top: 18rpx;
					left: 50rpx;
				}

				.popup-name-right {
					top: 18rpx;
					right: 50rpx;
				}
			}

			.prompt-popup-desc {
				font-size: 28rpx;
				color: #FFFFFF;
				margin-top: 28rpx;
				padding: 0 18rpx;
				text-align: justify;
				min-height: 166rpx;
				text-align: center;
				// overflow-y: auto;
			}

			.prompt-popup-btn {
				margin-top: 100rpx;

				.cancel-txt-btn,
				.sure-txt-btn {
					font-size: 30rpx;
					color: #FFF;
					width: 168rpx;
					height: 68rpx;
					line-height: 66rpx;
					text-align: center;
				}

			}
		}
	}
</style>